import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import AntDesign from 'react-native-vector-icons/AntDesign';
import moment from 'moment';
import { WhiteSpace, Modal } from '@ant-design/react-native';
import styles from './styles';
import { debounce } from '../../../../utils/common';
import { delPlan } from '../../../../comconfig/sqlfun';

const Item = ({ navigation, objItem, getPlanList }) => {
    const planId = parseInt(objItem.planid, 10);
    return (
        <View style={styles.card}>
            <TouchableOpacity
                onPress={() => debounce(() => navigation.push('事务完成详情', { planId }))}
                onLongPress={() => Modal.operation([
                    {
                        text: '删除',
                        onPress: () => {
                            delPlan(planId);
                            getPlanList();
                        },
                        style: { color: '#0F8DE9' },
                    },

                ])}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                    <Text style={styles.titel}>{objItem.title}</Text>
                </View>
                <WhiteSpace />
                <View style={styles.card_context}>
                    <View style={styles.date}>
                        <AntDesign
                            name="calendar"
                            size={25}
                            color="#017BFF"
                            style={{ marginRight: 5 }}
                        />
                        <Text style={styles.context}>
                            {moment(objItem.startTime).format('YY-MM-DD')}
                        </Text>
                        <Text style={{ color: '#017BFF', fontSize: 18 }}> ~ </Text>
                        <Text style={styles.context}>
                            {moment(objItem.planTime).format('YY-MM-DD')}
                        </Text>
                    </View>
                </View>
                <WhiteSpace />
                <View style={styles.card_context}>
                    <AntDesign
                        name="clockcircleo"
                        size={25}
                        color="#017BFF"
                        style={{ marginRight: 5 }}
                    />
                    <View style={styles.date}>
                        <Text style={{ fontSize: 18, color: '#017BFF' }}>
                            共计
                        </Text>
                        <Text style={styles.context}>
                            {objItem.actuallyWorkTime}
                            小时
                        </Text>
                        <Text style={{ fontSize: 18, color: '#017BFF' }}>
                            {' 于 '}
                        </Text>
                        <Text style={styles.context}>
                            {moment(objItem.endTime).format('YY-MM-DD')}
                        </Text>
                        <Text style={{ fontSize: 18, color: '#017BFF' }}>
                            {' 完成 '}
                        </Text>
                    </View>
                </View>
            </TouchableOpacity>
        </View>
    );
};
Item.defaultProps = {
    objItem: {},
    getPlanList: () => {},
};
Item.propTypes = {
    objItem: PropTypes.objectOf(PropTypes.any),
    getPlanList: PropTypes.func,
};
export default Item;
